<template>
    <div style="background: #fff;min-height:100vh;padding:0 20px; width: 100%">
        <img style="margin-top:10px;" src="../assets/img/common-icon-ArrowLeftBlack.svg" alt="" @click="returnTop(1)">
        <div v-if="oneStepShow1">
            <div style="margin-top:85px;display: flex;justify-content: center;">
                <div>
                    <img style='width: 65px;margin-left: 13px;' src="../assets/img/logo.svg" alt="">
                    <div style="text-align: center;margin-top: 20px;font-size: 20px;color: #FF2E67;font-weight: bold;">177***4668</div>
                </div>
            </div>
            <div style="font-size: 12px;color: #888;margin-top:15px;text-align: center;">天翼账号提供认证服务</div>
            <div style="font-size: 14px;color: #FF2E67;margin-top:20px;text-align: center;">其他账号登录</div>
            <div style="padding: 0 10px;">
                <div style="font-size:16px;margin-top:30px;background: #FF2E67;border:none;width:100%;border-radius: 27px;height:40px;color: #fff;line-height: 40px;text-align: center;" @click="stempCli">本机号一键登录</div>
            </div>
        </div>
        <div v-if="oneStepShow2">
            <div style="padding:0 10px;">
                <div style="font-size: 20px;margin-top:65px;text-align: center;font-weight: bold;">请输入手机号</div>
                <div style="position: relative;">
                     <img v-if="phoneName.length>0" @click="phoneName=''" src="../assets/img/layer-icon-close.svg" style="position: absolute;right: 5px;top: 22px;" alt="">
                     <input @focus="utils.blursCli" class="inputSty" v-model="phoneName" style="margin-top:10px;border-bottom: 1px solid #FF2E67;color:#333;" type="text" placeholder="请输入您的手机号码">
                </div>
                <div>
                    <button style="color:#fff;margin-top:50px;background: #FF2E67;border:none;width:100%;border-radius: 24px;height:40px;" @click="stempCli">获取验证码</button>
                </div>
            </div>
        </div>
        <div v-if="threeStepShow">
            <div style="padding:0 10px;">
                <div style="font-size: 20px;margin-top:65px;text-align: center;font-weight: bold;">邀请码</div>
                <div style="position: relative;margin-top:40px;">
                     <img v-if="phoneName.length>0" @click="phoneName=''" src="../assets/img/layer-icon-close.svg" style="position: absolute;right: 5px;top: 22px;" alt="">
                     <input @focus="utils.blursCli" class="inputSty" v-model="codeName" style="margin-top:10px;border-bottom: 1px solid #EDEDED;color:#333;" type="text" placeholder="请输入您的邀请码">
                </div>
                <!-- <div style="margin-top:10px;border:1px solid #FF2E67;width:100%;border-radius: 6px;height:40px;line-height: 40px;padding:0 15px;">
                    <span style="color:#FF2E67;">{{phoneName}}</span>
                    <span style="float: right;">邀请您加入淘金客</span>
                </div> -->
                <div>
                    <button style="color:#fff;margin-top:100px;background: #FF2E67;border:none;width:100%;border-radius: 24px;height:40px;" @click="segisterCli">完成</button>
                </div>
            </div>
        </div>
        <div v-if="twoStepShow" style="text-align: center;">
            <img style="width:22px;transform: rotate(180deg);" src="../assets/img/common-icon-moreWhite.svg" alt="" @click="returnTop(2)">
            <div style="padding:0 20px;font-size: 20px;margin-top:50px;font-weight: bold;">请输入验证码</div>
            <div style="margin-top:10px;">验证码已发送至{{phoneName}}</div>
            <div style="margin-top:50px;">
                <div class="borderSty" @touchend="gotouchend">
                    <van-password-input
                        gutter="2px"
                        :value="passwordNum"
                        :focused="showKeyboard"
                        @focus="showKeyboard = true"
                        />
                    </div>
                    <div class="white_content1">
                        <van-number-keyboard
                        :show="showKeyboard"
                        @input="onInput"
                        @delete="onDelete"
                        @blur="showKeyboard = false"
                        />
                    </div>
                </div>
                <div style="width:100%;display: flex;justify-content:flex-end; padding:0 20px;margin-top:10px;">
                     <div v-show="showCode" @click="codeCli" style="color:#FF2E67;">重新获取</div>
                     <div v-show="!showCode" style="color:#FF2E67;">
                        {{numTime}}s
                        <em style="color:#333;">后重新获取</em>
                    </div>
                </div>
        </div>
        <div style="text-align: center;display: flex;justify-content: center;margin-top:20px;position: absolute;bottom: 60px;width:100%;">
            <div style="margin-left: -40px;">
                <span>登录即代表同意</span>
                <span style="color: #FF2E67;">《用户协议》</span>和
                <span style="color: #FF2E67;">《隐私政策》</span>
            </div>
        </div>
    </div>
</template>

<script>
import { PasswordInput, NumberKeyboard,Toast } from 'vant';
export default {
  name: 'register',
  components:{
  },
  data () {
    return {
        oneStepShow1:false,
        oneStepShow2:true,
        twoStepShow:false,
        threeStepShow:false,
        phoneName:"",
        numTime:60,
        showCode:false,
        passwordNum:"",
        showKeyboard: true,
        codeName:""
    }
  },
  components: {
        [PasswordInput.name]:PasswordInput,
        [NumberKeyboard.name]:NumberKeyboard
  },
  watch: {
    phoneName(val){
        this.phoneName = val.replace(/[^0-9-]+/,'');
    }
  },
  mounted() {
  },
  methods: {
    onInput(key) {
        this.passwordNum = (this.passwordNum + key).slice(0, 6);
        if(this.passwordNum.length == 6){
            var list={
                phone:this.phoneName,
                code:this.passwordNum
            };
            this.$http.post(this.utils.config+"/netmall/user/app/api/checkCode?phone="+this.phoneName+"&code="+this.passwordNum,list).then((data)=>{
                if(data.data.success){
                    if(data.data.result.state == 0){
                        this.twoStepShow = false;
                        this.threeStepShow = true;
                    }
                    if(data.data.result.state == 1){
                        this.twoStepShow = false;
                        localStorage.setItem('token',data.data.result.token);
                        localStorage.setItem('user_id',data.data.result.user_id);                        
                        Toast('登录成功!');
                        this.$router.push('/')
                    }
                }else{
                    Toast(data.data.message)
                }
            })
        }
    },
    onDelete() {
        this.passwordNum = this.passwordNum.slice(0, this.passwordNum.length - 1);
    },
    returnTop(num){
        if(num == 1){
            this.$router.push('/login')
        }
        if(num == 2){
            this.oneStepShow1 = true;
        }
    },
    segisterCli(){
        if(!this.codeName){
            Toast('请输入邀请码！');
            return
        }
        var list={
            phone:this.phoneName,
            inviteCode:this.codeName
        };
        this.$http.post(this.utils.config+"/netmall/user/app/api/loginByInviteCode?phone="+this.phoneName+"&inviteCode="+this.codeName,list).then((data)=>{
            if(data.data.result && data.data.success){
                localStorage.setItem('token',data.data.result.token);
                localStorage.setItem('user_id',data.data.result.user_id);
                Toast('注册成功!');
                this.$router.push('/');
            }else{
                Toast(data.data.message);
            }
            })
    },
    stempCli(){
        if(!this.phoneName){
            Toast('请输入手机号！');
            return
        }
        if(this.phoneName.length != 11){
            Toast('手机号格式错误！');
            return
        }
        var list={
            phone:this.phoneName
        };
        this.$http.post(this.utils.config+"/netmall/user/app/api/sendSMS?phone="+this.phoneName,list).then((data)=>{
            })
        this.oneStepShow1=false;
        this.oneStepShow2=false;
        this.twoStepShow=true;
        var setTime = setInterval(()=>{
            if(this.numTime == 1){
                clearInterval(setTime);
                this.showCode = true;
            }else{
                this.numTime--
            }
        },1000)
    },
    gotouchend(){
        navigator.clipboard.readText().then(text => { this.passwordNum = text }).catch(err => { console.error('Failed to read clipboard contents: ', err); });
    },
    codeCli(){
        this.showCode = false;
        this.numTime=60;
        var list={
            phone:this.phoneName
        };
        this.$http.post(this.utils.config+"/netmall/user/app/api/sendSMS?phone="+this.phoneName,list).then((data)=>{
            })
        var setTime = setInterval(()=>{
            if(this.numTime == 1){
                clearInterval(setTime);
                this.showCode = true;
            }else{
                this.numTime--
            }
        },1000)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .borderSty /deep/ .van-password-input__security li{
        border:none;
        border-bottom: 1px solid #FF2E67
    }
</style>
